<template>
  <div v-analytics.pageview>
    <topbar category="Input Password Page" action="Done Click" rightTitle="Done" :nextAction="nextAction"/>
    <div class="login-content">
      <img src="~assets/login/passwordBg.png" class="login-ideograph">
      <label class="login-label">Input password</label>
      <input type="password" class="form-control" v-model="inputText" >
    </div>
    <loading :show="showLoading" />
  </div>
</template>

<script>
import { loading, toast, topbar } from 'components'
import { mapState } from 'vuex'
import { analyticsFn } from 'directive/analytics'

export default {
  name: 'passwd',
  components: {
    topbar,
    toast,
    loading,
  },
  data() {
    return {
      inputText: '',
      email: '',
      mobile: '',
      areaCode: '',
      verificationCode: '',
      showLoading: false,
    }
  },
  mounted() {
    this.email = this.$route.query.email
    this.mobile = this.$route.query.mobile
    this.areaCode = this.$route.query.areaCode
    this.verificationCode = this.$route.query.verificationCode
  },
  methods: {
    ...mapState([
      'userInfo',
    ]),
    nextAction() {
      if (this.inputText) {
        if (sessionStorage.isThrid !== '1') {
          if (this.email) {
            this.showLoading = true
            if (sessionStorage.isLogin === '0') {
              this.$store.dispatch('registerEmail', { email: this.email, mPassword: this.inputText })
              .then((res) => {
                this.showLoading = false
                if (res.code === 1000) {
                  toast(res.info)
                  if (sessionStorage.couponActivityId) {
                    this.$store.dispatch('certificateReceive', sessionStorage.couponActivityId)
                      .then(() => {
                        this.$router.replace({ path: '/' })
                        // delete sessionStorage.couponActivityId
                      })
                  } else {
                    this.redirect()
                  }
                  analyticsFn({
                    category: 'Input Password Page',
                    action: 'Sign Up Success',
                  })
                } else {
                  toast(res.info)
                }
              })
            } else {
              this.$store.dispatch('loginEmail', { email: this.email, mPassword: this.inputText })
                .then((res) => {
                  this.showLoading = false
                  if (res.code === 1000) {
                    this.redirect()
                    analyticsFn({
                      category: 'Input Password Page',
                      action: 'Login In Success',
                    })
                  }
                  toast(res.info)
                })
            }
          } else if (this.mobile) {
            this.showLoading = true
            if (sessionStorage.isLogin === '0') {
              this.$store.dispatch('registerPhone', { areaCode: this.areaCode, mobile: this.mobile, verificationCode: this.verificationCode, mPassword: this.inputText })
              .then((res) => {
                this.showLoading = false
                if (res.code === 1000) {
                  toast(res.info)
                  if (sessionStorage.couponActivityId) {
                    this.$store.dispatch('certificateReceive', sessionStorage.couponActivityId)
                      .then(() => {
                        this.$router.replace({ path: '/' })
                        // delete sessionStorage.couponActivityId
                      })
                  } else {
                    this.redirect()
                  }
                  analyticsFn({
                    category: 'Input Password Page',
                    action: 'Sign Up Success',
                  })
                } else {
                  toast(res.info)
                }
              })
            } else {
              this.$store.dispatch('loginPhone', { areaCode: this.areaCode, mobile: this.mobile, mPassword: this.inputText })
                .then((res) => {
                  this.showLoading = false
                  if (res.code === 1000) {
                    this.redirect()
                    analyticsFn({
                      category: 'Input Password Page',
                      action: 'Login In Success',
                    })
                  }
                  toast(res.info)
                })
            }
          }
        } else {
          console.log(sessionStorage.openId)
          console.log(sessionStorage.accessToken)
          console.log(sessionStorage.authType)
          console.log(sessionStorage.isLogin)
          this.showLoading = true
          this.$store.dispatch('thridBind'
            , {
              openId: sessionStorage.openId,
              accessToken: sessionStorage.accessToken,
              phone: this.mobile,
              countryCode: this.areaCode,
              mPassword: this.inputText,
              type: sessionStorage.authType,
            }).then((res) => {
              this.showLoading = false
              if (res.code === 1000) {
                this.redirect()
              }
              toast(res.info)
            })
        }
      } else {
        toast('Please enter your password')
      }
    },
    redirect() {
      const redirectUrl = sessionStorage.redirect || '/'
      this.$router.replace({ path: redirectUrl })
    },
  },
}
</script>
